<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">{{title}}</div>
    </div>
    <div style="padding: 0.3rem;">
      <van-cell-group>
        <van-field required readonly clickable :value="all.khmc" label="客户" disabled placeholder="请选择客户" @click="suoshuhangyelog = true"/>
      </van-cell-group>
    	<van-cell-group>
    	  <van-field required v-model="all.bm" label="部门" placeholder="请输入部门" />
    	</van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.zw" label="职务" placeholder="请输入职务" />
      </van-cell-group>
      <van-cell-group>
        <van-field required v-model="all.xm" label="姓名" placeholder="请输入姓名" />
      </van-cell-group>
      <van-cell-group>
        <van-field  readonly clickable :value="all.xb" label="性别" placeholder="请选择性别" @click="kehuleixinglog = true"/>
      </van-cell-group>
      <van-cell-group>
        <van-field  readonly v-model="all.csrq" label="出生日期" placeholder="请输入出生日期" @click="shijianlog = true" />
      </van-cell-group>
      <van-cell-group>
        <van-field  v-model="all.dh" label="联系电话" placeholder="请输入联系电话" />
      </van-cell-group>

      <van-cell-group>
        <van-field  v-model="all.wx" label="微信" placeholder="请输入微信" />
      </van-cell-group>
      <van-cell-group>
        <van-field  v-model="all.qq" label="QQ" placeholder="请输入QQ" />
      </van-cell-group>
      <van-cell-group>
        <van-field  v-model="all.yx" label="邮箱" placeholder="请输入邮箱" />
      </van-cell-group>
      <van-cell-group>
        <van-field  v-model="all.dz" label="地址" placeholder="请输入地址" />
      </van-cell-group>
      <van-cell-group>
        <van-field  v-model="all.bz" label="备注" placeholder="请输入备注" />
      </van-cell-group>

      <div class="flexcc" style="margin-top: 0.3rem;">
      	<van-button type="info" size="small" @click="baocun">保存</van-button>
      </div>


    	</div>
    <van-popup v-model="shijianlog" position="bottom" >
    	<van-datetime-picker v-model="all.csrq" type="date" title="选择时间" @confirm="shijianConfirm" @cancel="shijianCancel" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>

    <van-popup v-model="suoshuhangyelog" position="bottom">
    	<van-picker title="请选择客户" show-toolbar :columns="kehulist" value-key="name"  @confirm="hangyeConfirm" @cancel="hangyeCancel" />
    </van-popup>

    <van-popup v-model="kehuleixinglog" position="bottom">
    	<van-picker title="请选择性别" show-toolbar :columns="kehuleixing"  @confirm="sexConfirm" @cancel="sexCancel" />
    </van-popup>

  </div>
</template>

<script>
  import * as dd from 'dingtalk-jsapi';
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {
        suoshuhangyelog:false,
        suoshuhangye:[],
        shijianlog:false,
        kehulist:[],
          title:"新建联系人",
          minDate: new Date(1900, 0, 1),
          maxDate: new Date(2100, 10, 1),
          what:'add',
         all:{
           khmc:"",
            "id": "",
            "khid": "",
            "bm": "",
            "zw": "",
            "xm": "",
            "xb": "",
            "csrq": "",
            "dh": "",
            "wx": "",
            "qq": "",
            "yx": "",
            "dz": "",
            "bz": "",
            fzrid:JSON.parse(localStorage.getItem('person')).userid,
        },
        kehuleixinglog:false,
        kehuleixing:['男','女']
			}
		},
		created() {
      //新建时候带进来客户信息
      if(this.$route.query.khmc){
        this.all.khmc = this.$route.query.khmc
      }
      if(this.$route.query.khid){
        this.all.khid = this.$route.query.khid
      }
      //编辑时候标题
      if(this.$route.query.bianji){
        this.title = '联系人编辑'
      }
      //编辑
      if(this.$route.query.id){
        axios.get('/Contact/queryContactDetail?lxrid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.all = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      }

      this.getkehulist()
		},
		mounted() {

		},
		methods: {
      sexConfirm:function(val){
        this.all.xb = val
      	this.kehuleixinglog = false
      },
      sexCancel:function(val){
        this.kehuleixinglog = false
      },
      hangyeConfirm:function(val){

      	this.all.khid = val.value
        this.all.khmc = val.name

      	this.suoshuhangyelog = false
      },
      hangyeCancel:function(val){
      	this.suoshuhangyelog = false
      },

      getkehulist:function(){
        axios.get('/Customer/queryCustomerList',{params:this.all}).then((response)=>{
        	if (response.data.state == 200) {

            response.data.data.forEach(item=>{
              let obj = {
                name:item.khmc,
                value:item.id
              }
              this.kehulist.push(obj)
            })

        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      shijianConfirm:function(val){

        this.all.csrq =  moment(val).format('YYYY-MM-DD')

      	this.shijianlog = false
      },
      shijianCancel:function(val){
        this.shijianlog = false
      },


      xiugai:function(){
        if(!this.all.khname || !this.all.bm || !this.all.zw || !this.all.xm){
          vant.Toast('请填写必填项');
          return false
        }
        axios.post('/Contact/updateContact',this.all).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('修改联系人成功');
            this.$router.go(-1)
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      baocun:function(){
        if(this.all.id){
          axios.post('/Contact/updateContact',this.all).then((response)=>{
          	if (response.data.state == 200) {
              vant.Toast('修改联系人成功');
              this.$router.go(-1)
          	} else {
              vant.Toast(response.data.msg);
          	}
          })
        }else{
          axios.post('/Contact/addContact',this.all).then((response)=>{
          	if (response.data.state == 200) {
              vant.Toast('新建联系人成功');
              this.$router.go(-1)
          	} else {
              vant.Toast(response.data.msg);
          	}
          })
        }

      },

		}
	}
</script>

<style scoped lang="less">


</style>
